<template>
  <div class="course-order">
    <div style="text-align:right">
      <button class="save-btn" @click="submit">保存排序</button>
    </div>
    <ul class="line-wrappper">
      <template v-if="bookList.length">
        <draggable
          v-model="bookList"
          chosen-class="compTreeChosen"
          force-fallback="true"
          group="people"
          animation="1000"
        >
          <transition-group>
            <li v-for="item in bookList" :key="item.id">
              <div class="left">
                <img :src="item.picFile" alt="">
              </div>
              <div class="middle">
                <div style="margin-bottom:10px">
                  <a href="javascript:;" @click="$router.push({ name: 'CourseBody', params: { id:item.id } })">{{ item.name }}</a></div>
                <div style="color: #b4c4d2;font-size: 13px;">
                  <span>{{ item.bookCount }}课时</span>
                  <svg-icon icon-class="icon-shijian" style="margin-left:20px;margin-right:5px" />
                  <span>{{ item.bookTime }}</span>
                </div>
              </div>
              <div class="right">
              <!-- <button @click="$router.push({name: 'CourseBody', params: { id: item.id }})">进入学习</button> -->
              </div>
            </li>
          </transition-group>
        </draggable>
      </template>
      <!-- 暂无数据 -->
      <empty-data v-else text="暂无数据" />
    </ul>
  </div>
</template>

<script>
import { getLearnGroupTable, setGroupBookSort } from '@/api/learnCenter'
import { fileHostUrl, formatSeconds } from '@/utils'
// 导入draggable组件
import draggable from 'vuedraggable'
// 组件
import EmptyData from '@/components/EmptyData'
export default {
  name: 'CourseOrder',
  components: { draggable, EmptyData },
  data() {
    return {
      activeName: '1',
      bookList: [],
      routeParams: {}
    }
  },
  activated() {
    this.routeParams = this.$route.params
    this.initWindow()
  },
  methods: {
    initWindow() {
      const vPar = new this.ParamArr()
      vPar.setStr('GroupID', this.routeParams.id)
      getLearnGroupTable(vPar).then(vPar => {
        // console.log(vPar)
        const nodes = []
        const table = new this.SQLTable(vPar.getTable('k_learn_book'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['id'] = table.getValueByName('ID')
          node['picFile'] = fileHostUrl + '/' + table.getValueByName('PicFile')
          node['name'] = table.getValueByName('Name')
          node['createTime'] = table.getValueByName('CreateTime')
          node['createBy'] = table.getValueByName('CreateBy')
          node['bookCount'] = table.getValueByName('BookCount')
          node['bookTime'] = formatSeconds(table.getValueByName('BookTime'))
          nodes.push(node)
          table.next()
        }
        this.bookList = nodes
        // console.log(this.bookList)
      })
    },
    submit() {
      if (!this.bookList.length) return
      const vPar = new this.ParamArr()
      vPar.setInt('Count', this.bookList.length)
      vPar.setStr('GroupID', this.routeParams.id)
      this.bookList.forEach((item, index) => {
        vPar.setStr(`ID_${index}`, item.id)
      })
      // console.log(vPar)
      setGroupBookSort(vPar).then(vPar => {
        this.$message.success('保存排序成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.course-order {
  width: 100%;
  height: 100%;
  padding: 10px;
  // min-height: 500px;
  .el-scrollbar {
    height:100%
  }
  .save-btn {
    cursor: pointer;
    width: 120px;
    height: 30px;
    border: none;
    box-shadow: none;
    background: rgba(22, 155, 213, 1);
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    background-color: $primaryColor;
    z-index: 1;
  }
}
.study-wrapper {
  width: 80%;
  margin: 0 auto;
}
::v-deep .el-tabs .el-tabs__item {
  font-size: 15px;
  // font-weight: bold;
}
.line-wrappper {
  padding-left: 0;
  li {
    cursor: move;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    padding-bottom: 5px;
    margin-bottom: 8px;
    &:hover {
      background: #f1f1f1;
    }
    .left {
      img {
        width: 50px;
        height: 50px;
        object-fit: cover;
      }
    }
    .middle {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      margin-left: 10px;
    }
    .right {
      display: flex;
      align-items: center;
      button {
        margin-left: 5px;
        width: 120px;
        height: 30px;
        border: none;
        // border-radius: 5px;
        box-shadow: none;
        background: $primaryColor;
        font-size: 13px;
        font-weight: 400;
        color: #fff;
        cursor: pointer;
      }
    }
  }
}
.compTreeChosen {
  border: solid 1px #3089dc !important;
}
::v-deep .el-tabs__item.is-active {
  color: $primaryColor !important;
}
::v-deep .el-tabs__active-bar {
  color: $primaryColor !important;
}
</style>
